<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>123</p>
    <script>
        // 事件3要素：
        // 1. 事件源
        // 2. 事件触发的类型
        // 3. 事件执行程序
        //当我们点击了按钮，div里面的内容会发生变化
        //    1. 获取元素
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
            //2. 注册事件、执行事件程序
        btn.onclick = function() {
            // div.innerText = '2020-8-20';
            div.innerText = getDate();
        }


        function getDate() {
            var date = new Date(); //内置对象
            // console.log(data.getFullYear()); //获取当前日期的年 2010
            // console.log(data.getMonth() + 1); //月份 返回的月份小一个月 记得加1
            // console.log(date.getDate()); //返回的是几号
            // console.log(date.getDay()); //周一返回的是1 周六返回的是6 周日返回的是0

            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
        }

        //我们元素可以不用添加事件（页面加载直接显示）
        var p = document.querySelector('p'); // 获取元素
        p.innerText = getDate(); // 修改元素内容
    </script>


</body>

</html>